<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<!-- 导入css样式 -->
		<link href="../lib/css/bootstrap.min.css" rel="stylesheet" />
		
		<!-- 导入jQuery库 -->
		<script type="text/javascript" src="../lib/jquery/jquery-1.11.3.min.js" ></script>
		
		<!-- 导入js库 -->
		<script type="text/javascript" src="../lib/js/bootstrap.min.js" ></script>
		
		<!-- 导入校验的包 -->
		<script type="text/javascript" src="../lib/validation/js/bootstrapValidator.js"></script>
		<script type="text/javascript" src="../lib/validation/js/language/zh_CN.js" ></script>
		<link rel="stylesheet" href="../lib/validation/css/bootstrapValidator.css" />
		
	</head>
	<body style="padding-left: 20px;">

<h1>Bootstrap 表单校验</h1>
	
<h2>普通校验</h2>
<form id="form01" name="form01" class="col-md-5">
    <div class="form-group">
        <label>Username</label>
        <input type="text" class="form-control" name="username" value="123456"/>
    </div>
    <div class="form-group">
        <label>Email address</label>
        <input type="text" class="form-control" name="email"  value="123456@qq.com" />
    </div>
    <div class="form-group">
        <label>Hobby </label>
        <select type="select" class="form-control" name="hobby"  >
    		<option value="">---请选择---</option>
    		<option value="0">编程</option>
    		<option value="1">游戏</option>
    		<option value="2">旅游</option>
    		<option value="undefined">不知道</option>
        </select>
    </div>
    <div class="form-group">
        <label>爱好</label>
        <input type="checkbox" name="favorite" value="0" />编程
        <input type="checkbox" name="favorite" value="1" />游戏
        <input type="checkbox" name="favorite" value="2" />旅游
    </div>
    <div class="form-group">
        <label>爱好程度</label>
        <input type="radio" name="level" value="0" />特别喜欢
        <input type="radio" name="level" value="1" />喜欢
        <input type="radio" name="level" value="2" />不喜欢
    </div>
    <div class="form-group">
    	<label>自定义校验规则</label>
        <input type="text" name="selRule" class="form-control" />
    </div>
    <div class="form-group">
        <button type="submit" name="submit" class="btn btn-primary">Submit</button>
    </div>
    <div class="form-group">
        <button type="button" id="sure" class="btn btn-primary" disabled="true">Submit</button>
    </div>
</form>

<script>
	$(function () {
        $("#form01").bootstrapValidator({
			message: 'This value is not valid',
	        feedbackIcons: {
				valid: 'glyphicon glyphicon-ok',
				invalid: 'glyphicon glyphicon-remove',
				validating: 'glyphicon glyphicon-refresh'
			},
            fields: {
            	// 根据 name 属性值来匹配校验
                username: {
                    message: '用户名验证失败',
                    validators: {
                        notEmpty: {
                            message: '用户名不能为空'
                        },
                        stringLength: {
                            min: 6,
                            max: 18,
                            message: '用户名长度必须在6到18位之间'
                        },
                        regexp: {
                            regexp: /^[a-zA-Z0-9_]+$/,
                            message: '用户名只能包含大写、小写、数字和下划线'
                        }
                    }
                },
                email: {
                    validators: {
                        notEmpty: {
                            message: '邮箱地址不能为空'
                        },
                        emailAddress: {
                            message: '邮箱地址格式有误'
	                    }//,
//	                    regexp:{
//	                    	regexp: /^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$/,
//	                    	message:'邮箱格式不正确'
//	                    }
                    }
                    
                },
                hobby:{
                	validators: {
                		notEmpty:{
                			message: '必须选择一个爱好'
                		},
                		callback:{
                			message:"不能选择\"不知道\"",
                			callback:(value,validator) => {
                				return (value != "undefined" && value == undefined)?true:false;
                			}
                		}
                	}
            	},
            	favorite:{
            		validators: {
	                    choice: {
	                        min: 1,
	                        max: 1,
	                        message: '至少选择一个'
	                    }
                	}
            	},
            	level:{
            		validators: {
                		notEmpty:{
                			message: '必须选择爱好程度!'
                		}
                	}
            	},
            	selRule:{
            		validators:{
            			callback : {
            				message : "必须大于0小于100",
	            			/*callback : function(value, validator) {//es5语法
	            				console.log(value,validator)
	            				if(value > 0 && value < 100){
	            					return true
	            				}else{
	            					return false
	            				}
	            			}*/
	            			callback : (value, validator) => {//es6语法
	            				console.log(value,validator)
	            				if(value > 0 && value < 100){
	            					return true
	            				}else{
	            					return false
	            				}
	            			}
            			}
            		}
            	}
            }
        })
        //success:表示成功,form:表示表单,bv:表示BootstrapValidation,该方法表示表单校验成功
        // 点击 submit 按钮才会触发
        .on('success.form.bv', function(e) {
//      	console.log(e);
			console.log("校验成功 ... ");
			 $("#sure").removeAttr("disabled");
            // 表单提交前的处理
            e.preventDefault();//阻止表单提交
            // 得到表单实例对象
            var $form = $(e.target);
            // 得到 BootstrapValidator 实例对象
            var bv = $form.data('bootstrapValidator');
            // 使用 Ajax 提交表单对象
            /*$.post($form.attr('action'), $form.serialize(), function(result) {
                console.log(result);
            },'json');*/
        })
        // 点击 submit 按钮才会触发
        .on('error.form.bv', function(e) {
                console.log(e);
                console.log("校验失败 ... ");
                $("#sure").attr("disabled",true);
        })
        // 校验的时候实时触发
        .on("status.field.bv",function(e,data){
//      	console.log(e,data);
        })
        // 校验的成功时候实时触发
        .on("success.field.bv",function(e,data){
        	/*console.log(e,data)
        	console.log(data.bv.isValid())*/
        	if(data.bv.isValid()){
        		$("#sure").removeAttr("disabled")
        	}
        })
        .on("error.field.bv",function(e,data){
        	/*console.log(e,data)
        	console.log(data.bv.isValid())*/
        	if(!data.bv.isValid()){
        		$("#sure").attr("disabled",true)
        	}
        })
        /*.on("error.validator.bv",function(e){
        	console.log("某个表单校验失败 ... ");
        })
        .on("success.validator.bv",function(e){
        	console.log("某个表单校验成功 ... ");
        })*/
    });
</script>


</body>
	
</html>
